<script>
import IndexListItem from "@/components/IndexListItem.vue";
import Card from "@/components/Card.vue";

export default {
  components: {Card, IndexListItem},
  data() {
    return {
      input: '计算机协会',
      itemList: [
        {id: '1', msg: 'LGD重拾自信力拼WE，KZ.斗鱼气势如虹再迎劲敌', time: '03/03'},
        {id: '2', msg: '焦点战来袭！白鲨.斗鱼迎来魔鬼赛程，成都AG提防爆冷', time: '06/21'},
        {id: '3', msg: '新人首秀EDG.斗鱼不敌Q9，高然双MVP助XROCK.斗鱼成功复仇', time: '04/15'},
        {id: '4', msg: '基础体验大升级：从社交到战术全面优化', time: '03/20'},
        {id: '5', msg: '巅峰赛全面进化，四大升级开启竞技新体验', time: '06/03'},
        {id: '6', msg: 'CFPL疯狂周末，双O组合表现值得期待，J1E再遇老队友', time: '05/24'},
        {id: '7', msg: '白鲨.斗鱼直落两局力克EP.快手，成都AG惜败KZ.斗鱼', time: '01/21'},

      ],
      hot_cubs: [
        {
          id: '1',
          title: '计算机协会',
          pic: 'https://img1.baidu.com/it/u=2298353784,2124135654&fm=253&fmt=auto&app=120&f=JPEG?w=842&h=500'
        },
        {
          id: '2',
          title: '象棋协会',
          pic: 'https://n.sinaimg.cn/sports/crawl/210/w710h300/20200703/23a2-ivwfwmn8749166.jpg'
        },
        {id: '3', title: '篮球协会', pic: 'https://p2.itc.cn/images01/20220814/02c9a3c1bd8f47d8bfe113ffc753f7f1.png'},
        {
          id: '4',
          title: '书法协会',
          pic: 'https://img0.baidu.com/it/u=2027679383,4209241884&fm=253&fmt=auto&app=138&f=GIF?w=378&h=172'
        },
        {
          id: '5',
          title: '学生会',
          pic: 'https://img2.baidu.com/it/u=937158942,394595973&fm=253&fmt=auto&app=138&f=JPEG?w=329&h=330'
        },
        // {id:'5', title:'学生会', pic:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'},
      ],
      hot_keys_list: [
        "计算机协会",
        "象棋协会",
        "篮球协会",
        "电竞社",
        "学生会"
      ],
      cub_list: [
        {id: '1', name: '计算机协会', members: '50', time: '2023/03/05', status: '1', rate: 2},
        {id: '2', name: '象棋协会', members: '50', time: '2023/03/05', status: '1', rate: 4},
        {id: '3', name: '书法协会', members: '50', time: '2023/03/05', status: '1', rate: 1},
        {id: '4', name: '学生会', members: '50', time: '2023/03/05', status: '2', rate: 2},
        {id: '5', name: '计算机协会', members: '50', time: '2023/03/05', status: '3', rate: 5},
        {id: '6', name: '计算机协会', members: '50', time: '2023/03/05', status: '1', rate: 3},
      ]

    }
  }
}

</script>

<template>
  <div class="home_box">

    <!--    轮播图     -->
    <div class="top_box">
      <div class="left">
        <el-carousel style="width: 100%   " height="372px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h1 class="small">{{ item }}</h1>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <el-tabs value="first" @tab-click="handleClick">
          <el-tab-pane label="算法程序设计" name="first">
            <index-list-item v-for=" o in itemList" :item="o" :key="o.id"/>
          </el-tab-pane>
          <el-tab-pane label="数据库原理" name="second">
            <index-list-item v-for=" o in itemList" :item="o" :key="o.id"/>
          </el-tab-pane>
          <el-tab-pane label="分布式数据库" name="third">
            <index-list-item v-for=" o in itemList" :item="o" :key="o.id"/>
          </el-tab-pane>
          <el-tab-pane label="数据结构" name="fourth">
            <index-list-item v-for=" o in itemList" :item="o" :key="o.id"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--热门社团-->
    <div class="hot_box">
      <h1>热门社团</h1>
      <div class="club_container">
        <Card v-for="o in hot_cubs" :item="o" :key="o.id"/>
      </div>
    </div>

    <!--    社团列表     -->
    <div class="cub_list_box">
      <div class="cub_list_title">
        <div class="search_box">
          <el-input style="width: 450px; margin-right: 10px" v-model="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="hot_input">
          <span>热搜：</span>
          <span class="hot_keys" v-for=" o in hot_keys_list" :key="o">{{ o }}</span>
        </div>
      </div>

      <div class="cub_list">
        <el-table
          :data="cub_list"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="社团名称"
            width="180">
          </el-table-column>
          <el-table-column prop="members" label="社团成员" width="180">
            <template #default="scope">
              {{ scope.row.members }}人
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template scope="scope">
              {{scope.row.status}}
            </template>
          </el-table-column>
          <el-table-column
            prop="rate"
            label="评分">
            <template scope="scope">
              <el-rate disabled v-model="scope.row.rate"></el-rate>
            </template>
          </el-table-column>
        </el-table>
        <div class="page_container">
          <el-pagination
            style="display: flex"
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>


    <!--    回到顶部     -->
    <el-backtop :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >
        UP
      </div>
    </el-backtop>

  </div>
</template>

<style scoped>
.home_box {
  width: 95%;
  height: 100vmax;
  margin: 60px auto 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，水平偏移0，垂直偏移2px，模糊半径4px，阴影颜色为rgba(0, 0, 0, 0.1) */
}

.top_box {
  width: 80%;
  height: 50vh;
  margin: 0 auto;
  display: flex;

  .right {
    width: 50%;
    padding: 10px;
    overflow: hidden;
  }

  .left {
    width: 50%;
    padding: 10px;
  }
}

.hot_box {
  width: 80%;
  margin: 20px auto;
}

.club_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cub_list_box {
  width: 80%;
  margin: 0 auto;

  .cub_list_title {
    display: flex;
  }

  .search_box {
    width: 55%;
  }

  .hot_input {
    width: 45%;
  }

  span {
    line-height: 40px;
  }

  .hot_keys {
    color: #005980;
    margin-right: 10px;
  }

  .hot_keys:hover {
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
    cursor: pointer;
  }


}
.page_container{
  margin-top: 10px;
  display: flex;
  justify-content: center
}



.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>
